<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!--    <link rel="stylesheet" href="zhuye.css">-->
    <title>添加房源信息</title>
    <style>
        /* 全局设置文字颜色为黑色 */
        body,
        label,
        input,
        button,
        h1 {
            color: black;
        }
        /* 确保表单内的所有文本也为黑色 */
        form {
            color: black;
        }
    </style>
</head>

<body class="bg-gray-100 font-sans">
<div id="app" class="container mx-auto p-8">
    <h1 class="text-3xl font-bold mb-6 text-center">添加房源信息</h1>
    <form @submit.prevent="submitForm" class="bg-white p-6 rounded shadow-md">
        <div class="mb-4">
            <label for="fangchanbianhao" class="block text-gray-700 font-bold mb-2">房产编号</label>
            <input type="text" v-model="houseInfo.fangchanbianhao" id="fangchanbianhao" name="fangchanbianhao" class="w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500">
        </div>
        <div class="mb-4">
            <label for="fangyuanbiaoti" class="block text-gray-700 font-bold mb-2">房源标题</label>
            <input type="text" v-model="houseInfo.fangyuanbiaoti" id="fangyuanbiaoti" name="fangyuanbiaoti" class="w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500">
        </div>
        <div class="mb-4">
            <label for="fangwuleixing" class="block text-gray-700 font-bold mb-2">房屋类型</label>
            <input type="text" v-model="houseInfo.fangwuleixing" id="fangwuleixing" name="fangwuleixing" class="w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500">
        </div>
        <div class="mb-4">
            <label for="huxing" class="block text-gray-700 font-bold mb-2">户型</label>
            <input type="text" v-model="houseInfo.huxing" id="huxing" name="huxing" class="w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500">
        </div>
        <div class="mb-4">
            <label for="suozaiceng" class="block text-gray-700 font-bold mb-2">所在层</label>
            <input type="text" v-model="houseInfo.suozaiceng" id="suozaiceng" name="suozaiceng" class="w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500">
        </div>
        <div class="mb-4">
            <label for="zongcengshu" class="block text-gray-700 font-bold mb-2">总层数</label>
            <input type="text" v-model="houseInfo.zongcengshu" id="zongcengshu" name="zongcengshu" class="w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500">
        </div>
        <div class="mb-4">
            <label for="jianzhumianji" class="block text-gray-700 font-bold mb-2">建筑面积</label>
            <input type="text" v-model="houseInfo.jianzhumianji" id="jianzhumianji" name="jianzhumianji" class="w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500">
        </div>
        <div class="mb-4">
            <label for="shiyongmianji" class="block text-gray-700 font-bold mb-2">使用面积</label>
            <input type="text" v-model="houseInfo.shiyongmianji" id="shiyongmianji" name="shiyongmianji" class="w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500">
        </div>
        <div class="mb-4">
            <label for="shengfen" class="block text-gray-700 font-bold mb-2">省份</label>
            <input type="text" v-model="houseInfo.shengfen" id="shengfen" name="shengfen" class="w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500">
        </div>
        <div class="mb-4">
            <label for="chengshi" class="block text-gray-700 font-bold mb-2">城市</label>
            <input type="text" v-model="houseInfo.chengshi" id="chengshi" name="chengshi" class="w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500">
        </div>
        <div class="mb-4">
            <label for="quxian" class="block text-gray-700 font-bold mb-2">区县</label>
            <input type="text" v-model="houseInfo.quxian" id="quxian" name="quxian" class="w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500">
        </div>
        <div class="mb-4">
            <label for="xiangxidizhi" class="block text-gray-700 font-bold mb-2">详细地址</label>
            <input type="text" v-model="houseInfo.xiangxidizhi" id="xiangxidizhi" name="xiangxidizhi" class="w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500">
        </div>
        <div class="mb-4">
            <label for="fabushijian" class="block text-gray-700 font-bold mb-2">发布时间</label>
            <input type="text" v-model="houseInfo.fabushijian" id="fabushijian" name="fabushijian" class="w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500">
        </div>
        <div class="mb-4">
            <label for="lianxidianhua" class="block text-gray-700 font-bold mb-2">联系电话</label>
            <input type="text" v-model="houseInfo.lianxidianhua" id="lianxidianhua" name="lianxidianhua" class="w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500">
        </div>
        <div class="mb-4">
            <label for="yuezujin" class="block text-gray-700 font-bold mb-2">月租金</label>
            <input type="text" v-model="houseInfo.yuezujin" id="yuezujin" name="yuezujin" class="w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500">
        </div>
        <button type="submit" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none focus:ring focus:border-blue-300">提交</button>
    </form>
</div>

<script>
    const { createApp } = Vue;

    createApp({
        data() {
            return {
                houseInfo: {
                    fangchanbianhao: '',
                    fangyuanbiaoti: '',
                    fangwuleixing: '',
                    huxing: '',
                    suozaiceng: '',
                    zongcengshu: '',
                    jianzhumianji: '',
                    shiyongmianji: '',
                    shengfen: '',
                    chengshi: '',
                    quxian: '',
                    xiangxidizhi: '',
                    fabushijian: '',
                    lianxidianhua: '',
                    yuezujin: ''
                }
            };
        },
        methods: {
            submitForm() {
                fetch('http://localhost:8888/fangwujibenxinxi/tianjia', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(this.houseInfo)
                })
                    .then(response => response.json())
                    .then(data => {
                        console.log(data);
                        alert('房源信息添加成功');
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('添加房源信息时出错');
                    });
            }
        }
    }).mount('#app');
</script>
</body>

</html>